<template>
    <div>
        <h2>演示文本插值: {{ title }}</h2>
        <div @click="changeTitle" style="cursor: pointer">更换文本插值</div>

        <h2>演示显示HTML</h2>
        <span v-html="htmlContent"></span>

        <h2>演示跳过编译</h2>
        <span v-pre>{{ 不会被编译 }}</span>

        <h2>演示运算</h2>
        <div>{{ number / 10 }}</div>
        <div>{{ isFine ? "我很好" : "一般般" }}</div>
        <div>{{ text.split(',').reverse().join("-") }}</div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                title: "I am title",
                htmlContent: "<a href='http://www.baidu.com'>访问百度</a>",
                number: 200,
                isFine: true,
                text: '123,456'
            }
        },
        created() {
            console.log(this.title);
        },
        mounted() {
            console.log(this.$el);
        },
        methods: {
            changeTitle() {
                if(this.title === "new title") {
                    this.title = "I am title";
                } else {
                    this.title = "new title";
                }
            }
        }
    }
</script>